<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.a {
				width: 200px;
				height: 200px;
				background: red;
				/* 
					浮动： left 左浮动
						   right 右浮动
						   none 不浮动
				 */
				float: right;
			}

			.b {
				width: 300px;
				height: 300px;
				background: yellow;
				/*
					clear： 清除浮动
						left: 清除周围左浮动元素对该元素造成的影响;
						right：
						清除周围右浮动元素对该元素造成的影响
						both:
						清除周围浮动元素对该元素造成的影响 
				*/
				/*clear: left;*/
				/*overflow: hidden;*/
				float: right;
			}

			.box {
				width: 500px;
				height: 230px;
				border: 5px solid black;
				margin-bottom: 50px;
			}

			img {
				float: left;
				width: 150px;
				margin-right: 30px;
			}

			p {
				background: yellow;
				/*overflow: hidden;*/
				margin: 50px 0;
			}


		</style>
	</head>
	<body>
		<!-- 
			浮动： 元素脱离文档流（元素在文档中所占的位置）沿着某一个方向进行移动，直到碰到父级边界或者其他同级浮动元素为止。
		 -->

		<div class="a"></div>
		<div class="b"></div>

		<!-- <div class="box">
			<img src="../img/b.jpg" alt="">
			<p>我们都一样，我们不一样，我们没有什么不同，你我不一样我们都一样，我们不一样，我们没有什么不同，你我不一样我们都一样，我们不一样，我们没有什么不同，你我不一样我们都一样，我们不一样，我们没有什么不同，你我不一样我们都一样，我们不一样，我们没有什么不同，你我不一样我们都一样，我们不一样，我们没有什么不同，你我不一样我们都一样，我们不一样，我们没有什么不同，你我不一样我们都一样，我们不一样，我们没有什么不同，你我不一样我们都一样，我们不一样，我们没有什么不同，你我不一样我们都一样，我们不一样，我们没有什么不同，你我不一样</p>
		</div>

		<div class="box">
			<img src="../img/b.jpg" alt="">
			<p>问世间情为何为</p>
			<p>直教人生死相许</p>
		</div>
 -->

	</body>
</html>